<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			.box1{
				width:200px;
				height:300px;
				border-style:solid;
				border-width:1px;
				border-color:green;
				/* 复合写法:border:粗细 颜色 样式; */
				border:1px red solid;
				/* 内边距padding:内容到边框的距离 */
				padding-top:10px; /* 上内边距 */
				padding-bottom:20px;/* 下内边距 */
				padding-left:30px;/* 左内边距 */
				padding-right:40px;/* 右内边距 */
				/* 复合写法padding:大小值 */
				padding:10px 20px 30px 40px;/* 上右下左顺时针 */
				padding:10px 20px 30px;/* 上,左右,下 */
				padding:10px 20px;
				padding:10px;/* 四个方向相同 */
			}
			.box2{
				width:200px;
				height:300px;
				border:1px solid blue;
				margin-top:100px;/* 上外边距 */
				margin-left:100px;/* 左外边距 */
				margin-right:100px;/* 右外边距 */
				margin-bottom:100px;/* 下外边距 */
				/* 复合写法margin:大小值 */
				margin:10px 20px 30px 40px;/* 上右下左顺时针 */
				
			}
			.box3{
				width:200px;
				height:300px;
				border:1px solid orange;
				margin:100px auto 0;/* auto自动的 */
			}
			/* 相邻两个盒子之间的外边距合并问题:
			两个盒子同时设置了外边距,相同边只取外边距的最大值.
			tips:一般来说只设置一个盒子的外边距 */
		</style>
	</head>
	<body>
		<!-- 4个要素  内容content  内边距padding  边框border -->
		<div class="box1">
			hello world!
		</div>
		<div class="box2">
			sean
		</div>
		<div class="box3">
			你好
		</div>
</html>